"use client";
import NavBar from "@/app/components/NavBar";
import Footer from "@/app/components/Footer";
import SearchBar from "@/app/components/SearchBar";
import VideoGrid from "@/app/components/VideoGrid";
import { use, useEffect, useState } from "react";
import { CategoryItem, VideoItem } from "@/app/types/video";

interface Params {
  params: Promise<{ id: string }>;
}

export default function CategroyPage({ params: promiseParams }: Params) {
  const [videos, setVideos] = useState<VideoItem[]>([]);
  const [keyword, setKeyword] = useState("");
  const [category, setCategroy] = useState<CategoryItem>()
  const params = use(promiseParams);
  useEffect(() => {
    fetch(`/api/categories/${params.id}`)
      .then((res) => res.json())
      .then((data) => {
        setCategroy(data.data)
      })
    fetch(`/api/videos/category?size=10&page=1&category=${params.id}`)
      .then((res) => res.json())
      .then((data) => {
        setVideos(data.data);
      })
  }, [params.id]);
  return (
    <div className="min-h-screen">
      <NavBar />
      <main className="mx-auto w-full max-w-6xl px-4 py-6">
        <h1 className="mb-4 text-2xl font-semibold">{category?.name}</h1>
        <SearchBar
          keyword={keyword}
          category={category}
          onChange={(n) => {
            setKeyword(n.keyword);
          }}
        />
        <VideoGrid videos={videos} />
      </main>
      <Footer />
    </div>
  );
}
